<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中国象棋 - 网页版</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>中国象棋</h1>
        </header>
        
        <div class="game-wrapper">
            <!-- 游戏设置面板 -->
            <div class="game-settings">
                <div class="mode-selector">
                    <h3>游戏模式</h3>
                    <label>
                        <input type="radio" name="gameMode" value="human-ai" checked>
                        人机对战
                    </label>
                    <label>
                        <input type="radio" name="gameMode" value="human-human">
                        人人对战
                    </label>
                </div>
                
                <div class="ai-difficulty">
                    <h3>AI难度</h3>
                    <select id="aiDifficulty">
                        <option value="easy">简单</option>
                        <option value="medium">中等</option>
                        <option value="hard">困难</option>
                    </select>
                </div>
                
                <div class="score-board">
                    <h3>得分统计</h3>
                    <div class="score">
                        <span>红方: </span><span id="redScore">0</span>
                    </div>
                    <div class="score">
                        <span>黑方: </span><span id="blackScore">0</span>
                    </div>
                </div>
                
                <div class="game-info">
                    <h3>游戏信息</h3>
                    <div id="gameStatus">准备开始</div>
                    <div id="currentTurn">红方回合</div>
                </div>
            </div>
            
            <!-- 棋盘区域 -->
            <div class="board-container">
                <canvas id="chessBoard" width="640" height="730"></canvas>
                
                <!-- 游戏控制按钮 -->
                <div class="control-buttons">
                    <button id="startBtn" class="control-btn primary">开始游戏</button>
                    <button id="pauseBtn" class="control-btn" disabled>暂停</button>
                    <button id="resumeBtn" class="control-btn" disabled>继续</button>
                    <button id="undoBtn" class="control-btn" disabled>悔棋</button>
                    <button id="restartBtn" class="control-btn">重新开始</button>
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2024 中国象棋网页版 | 纯HTML5 + CSS3 + JavaScript实现</p>
        </footer>
    </div>
    
    <!-- 游戏逻辑脚本 -->
    <script type="module" src="js/main.js"></script>
</body>
</html>